<template>
  <div id="app">
    <sa-calendar @handleClickDate="handleClickDate" :detailkey="'attendanceDate'" :startWeek="startWeek" :data="data"
      :date="date">
      <template #header="{ date }">
        <div style="height:40px;line-height:40px;background:skyblue;text-align:center">
          <span>
            {{ date }}
          </span>
          <span @click="toggleDate">点击我切换日期</span>
        </div>
      </template>

      <!-- <template #dayItem="{ item }">
        <div class="date-item">
          <div>
            {{ item.day }} {{ item.dateStr }}
          </div>
          <div>
            {{ (item.detail && item.detail.text) }}
          </div>
        </div>
      </template> -->
    </sa-calendar>

    <br>

    <sa-week-calendar @handleClickWeek="handleClickWeek" 
      :startWeek="startWeek" 
      :detailkey="'attendanceDate'"
      :date="date" :data="data">
      <template #weekItem="{ item }">
        <div>
          <!-- <p>{{(item.detail && item.detail.staffName)}}</p> -->
          <div>
            {{ item.day }}日
          </div>
          <div>
            星期{{ item.week }}
          </div>
        </div>
      </template>
    </sa-week-calendar>
    <br>
    <sa-drag></sa-drag>
  </div>
</template>

<script>

import testData from './utils/test';
// import { saCalendar, saWeekCalendar } from 'sa-calendar-vue2';
import { saCalendar, saWeekCalendar } from './package/index';
// import saCalendar from './package/sa-calendar/index.vue';
// import saWeekCalendar from './package/sa-week-calendar/index.vue';
import saDrag from './package/sa-drag/index.vue';
export default {
  name: 'App',
  components: {
    saCalendar,
    saWeekCalendar,
    saDrag
  },
  data() {
    return {
      data: [
        // { date: "2022-12-05", text: "世界很美好感谢有你" },
        ...testData
      ],
      date: new Date('2022-8-1'),
      startWeek: 7
    }
  },
  methods: {
    handleClickWeek(res) {
      console.log(res);
    },
    handleClickDate(res) {
      console.log(res);
    },
    toggleDate() {
      this.startWeek = 7;
      this.date = new Date('2022-10-10')
    }
  }
}
</script>

<style scoped>
.mdate {
  background-color: white;
  color: #333;
  font-size: 18px;
}

.Low {
  opacity: .5;
}
</style>